
  
  <script lang="ts">
  import { computed, defineComponent,ref,onMounted } from 'vue';
  import vipCard from "../store/vipCard";
  import userManagement from "../hooks/userManagement";


  
  export default defineComponent({
    name: 'MemberTable',
    props: {
      selected: {
        type: String,
        default: '',
      },
      searchText: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
      };
    },
    computed: {
      filteredData() {
        if (!this.selected && !this.searchText) {
          return this.tableData;
        }
        return this.tableData.filter((item) => {
          if (this.selected && item.status !== this.selected) {
            return false;
          }
          if (this.searchText && !item.cardNumber.includes(this.searchText) && !item.member.includes(this.searchText) && !item.phone.includes(this.searchText)) {
            return false;
          }
          return true;
        });
      },
    },
    setup(){
      const store = vipCard()
      const limit = 10
      const page = 1  
      const cardStatus = ref<string>()
      const queryName = ref<string>()
      const tableData = computed(()=>store.getUserVipCardPageList)

      const login = ()=>{

        userManagement.userVipCardPageList(cardStatus.value,limit,page,queryName.value)
      }
      onMounted(()=>{
        login()
      })
      return{
        tableData,
        login
      }
    }
  });
  </script>
  
  <style scoped>
.member-table {
  width: 100%;
}
</style>
  